<template>
	<view>
		<view class="storebox">
			<view class="storeinfo">
				<view class="storename">
					<image src="../../static/dp.png"></image>
					<view>{{storeinfo.merch_name}}</view>
				</view>
				<view class="storename">
					<view>{{storeinfo.voucher_money}}代{{storeinfo.usable_money}} 元代金券</view>
				</view>
				<view class="algorithm">
					<image @click="reduce()" src="../../static/jian.png"></image>
					<view>{{num||1}}</view>
					<image @click="add()" src="../../static/add.png"></image>
				</view>
				<!-- <view class="storephone">
					<view>联系电话</view>
					<view class="phone">
						<view>{{storeinfo.mobile}}</view>
						<image @click="callServer()" src="../../static/phone.png"></image>
					</view>
				</view> -->
			</view>
			<!-- <view class="topicbox">
				<view>到店付款</view>
				<view class="pricebox">￥{{inputmoney}}</view>
			</view>
			<view class="topicbox">
				<view>店铺优惠</view>
				<view class="pricebox">￥0.00</view>
			</view> -->
		</view>
		
		<view class="storebox" style="margin-top: 26rpx;">
			<view class="topicbox" @click="open()">
				<view>商品券/店铺券</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #F94D29;" v-if="couponinfo.coupon_type">
						<text v-if="couponinfo.coupon_type==1">-￥{{couponinfo.coupon_money}}</text>
						<text v-if="couponinfo.coupon_type==3">-￥{{couponinfo.coupon_money}}</text>
						<text v-if="couponinfo.coupon_type==2">{{couponinfo.discount_percent/10}}折</text>
					</view>
					<view class="coupon" v-else >{{couponlong||0}}张可用</view>
					<!-- <view class="coupon">{{couponlong||0}}张可用</view> -->
					<image src="../../static/jt.png"></image>
				</view>
			</view>
			<!-- <view class="topicbox">
				<view>会员抵扣</view>
				<view class="pricebox">￥0.00</view>
			</view> -->
		</view>
		<view class="remarkbox">
			<textarea v-model="remark" placeholder="备注"></textarea>
		</view>
		<view class="paybox">
			<view class="titlebox">支付方式</view>
			<view class="paytype" v-for="(item,index) in typelist" :key="item.id" @click="handlepaytype(item)">
				<view class="payname">
					<image :src="item.img"></image>
					{{item.title}}<text style="color: #F94D29;" v-if="index==0">{{myinfo.balance||0}}</text>
					<text style="color: #F94D29;" v-if="index==1">{{myinfo.wx_balance||0}}</text>
				</view>
				<image v-if="item.id==typeindex" src="../../static/gou.png"></image>
				<image v-else src="../../static/yuan.png"></image>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="navbut">
			<view class="totalprice">
				<text>合计: </text>
				<text style="color: #F94D29;">￥ </text>
				<text style="color: #F94D29;font-size: 38rpx;margin-right: 20rpx;" >{{totalPrice||storeinfo.voucher_money*num}}</text>
				<!-- <text style="color: #F94D29;font-size: 38rpx;margin-right: 20rpx;"v-else>{{inputmoney}}</text> -->
				<text v-if="couponinfo.coupon_type==1" style="text-decoration: line-through;color: #888888;">已优惠￥{{couponinfo.coupon_money||0}}</text>
				<text v-if="couponinfo.coupon_type==2" style="text-decoration: line-through;color: #888888;">{{couponinfo.discount_percent}}折</text>
				<text v-if="couponinfo.coupon_type==3" style="text-decoration: line-through;color: #888888;">已优惠￥{{couponinfo.coupon_money||0}}</text>
			</view>
			<view class="butbox" @click="tosumbit()">提交订单</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<coupon @handlecoupon="handlecoupon" @close="close" :list="couponlist"></coupon>
		</uni-popup>
	</view>
</template>

<script>
	import coupon from '../../components/coupon.vue'
	export default {
		components:{
			coupon
		},
		data() {
			return {
				typelist:[{img:'../../static/dou.png',title:'优生活余额支付',id:3},{img:'../../static/money.png',title:'余额支付',id:4},
				{img:'../../static/wx.png',title:'微信支付',id:2}],//1积分支付 2微信支付  3POS余额支付优生活支付 4账户余额支付
				typeindex:null,
				inputmoney:'',//输入的金额
				storeinfo:{},
				couponlist:[],//优惠券列表
				couponlong:'',
				couponinfo:{},
				coupon_id:'',
				orderid:'',//微信支付的订单
				fding:true,
				myinfo:{},
				remark:'',
				num:1,
			}
		},
		computed: {
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				console.log(this.storeinfo.voucher_money,'voucher_money')
				//coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵
				if(this.couponinfo.coupon_type==1){
					totalPrice = (this.storeinfo.voucher_money*this.num--*100 - (this.couponinfo.coupon_money*(100||0)))/100
				}
				if(this.couponinfo.coupon_type==2){
					totalPrice = ((this.storeinfo.voucher_money*this.num*100)/100) * (parseFloat(this.couponinfo.discount_percent/100)||0)
				}
				if(this.couponinfo.coupon_type==3){
					totalPrice = (this.storeinfo.voucher_money*this.num*100)/100 - (this.couponinfo.coupon_money*(100||0))/100
				}
				// return totalPrice
				return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
			},
		},
		onLoad(option) {
			// this.inputmoney = option.money
			this.storeinfo = JSON.parse(option.info) 
			console.log(this.storeinfo,'storeinfo')
			this.getcouopn()
			this.getinfo()
		},
		methods: {
			getinfo(){
				this.$http({
					url:'api/wechat/userinfo',
				}).then(res=>{
					this.myinfo = res.data
				})
			},
			reduce(){
				if(this.num==1){
					uni.showToast({
						title:'已不能再减少了',
						icon:'none'
					})
				}else{
					this.num--
				}
			},
			add(){
				this.num++
			},
			//选择支付方式
			handlepaytype(item){
				this.typeindex = item.id
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			//拨打电话
			callServer() {
				uni.makePhoneCall({
					phoneNumber: this.storeinfo.mobile
				})
			},
			//获取优惠卷
			getcouopn(){
				this.$http({
					url:'api/Wechat/getCouponByOrder',
					data:{
						order_money:this.storeinfo.voucher_money,
						type:4,//1商城下单 2外卖下单 3停车场 4商户
						goods_ids:'',
						merch_id:'',
					}
				}).then(res=>{
					this.couponlist = res.data
					this.couponlong = res.data.length
				})
			},
			//获取选择的优惠卷信息
			handlecoupon(result){
				console.log(result,'result')
				if(result.id){
					this.couponinfo = result
					this.coupon_id =''
					this.coupon_id = result.id
				}else{
					this.couponinfo = {}
					this.coupon_id =''
				}
				// this.couponinfo = result
				// this.coupon_id =''
				// this.coupon_id = result.id
			},
			//提交
			tosumbit(){
				if(this.typeindex==null){
					uni.showToast({
						title:'请选择支付方式',
						icon:'none'
					})
					return
				}
				if(this.fding ){
					this.fding = false
					setTimeout(()=>{
						this.fding = true
					},3000)
					this.$http({
						url:'api/Wechat/createVoucherOrder',
						data:{
							voucher_id:this.storeinfo.id,
							order_total_money:this.storeinfo.voucher_money,
							order_pay_money:this.totalPrice||this.storeinfo.voucher_money,
							coupon_id:this.coupon_id||'',
							remark:this.remark,//2微信支付 3余额支付order_pay_money
							pay_type:this.typeindex,
							num:this.num,
						}
					}).then(res=>{
						this.orderid = res.data
						this.fding = false
						if(this.typeindex==2){//1积分支付 2微信支付  3POS余额支付 4账户余额支付
							this.wechatPay(this.orderid)
						}else{
							this.balancepay(this.orderid)
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},1000)
						}
					})
				}
				
			},
			async wechatPay(orderid) {
				const {data} = await this.$http({
					url: 'api/lklpay/voucherOrderPay',
					data: {
						orderid:+orderid
					},
				})
				let that = this
				uni.requestPayment({
					timeStamp: data.rows.timestamp,
					nonceStr: data.rows.nonce_str,
					package: data.rows.package,
					signType: "RSA",
					paySign: data.rows.pay_sign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1000)
					},
					fail: function(res) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					},
				})
				
			},
			//余额支付接口
			balancepay(orderid){
				this.$http({
					url:'api/lklpay/balancePayVoucher',
					data:{
						orderid:orderid,//
						//3优生活余额支付balance 4帐户余额支付wx_balance
						pay_type:this.typeindex,////支付类型列表//1积分支付 2微信支付  3POS余额支付 4账户余额支付
					}
				}).then(res=>{
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					// setTimeout(()=>{
					// 	console.log(this.delivery_method,'this.delivery_method')
					// 	uni.reLaunch({
					// 		url:'/pageshop/goodsorder/goodsorder?type='+(-1)+'&order_type='+(2)+'&delivery_method='+(1)///0==物流订单，1==自提订单
					// 	})
					// },1000)
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.remarkbox{
		width: 650rpx;
		padding: 20rpx;
		margin: 20rpx auto;
		// height: 386rpx;
		background: #FFFFFF;
		border-radius: 10rpx ;
		>textarea{
			width: 650rpx;
			height: 160rpx;
			// margin: 20rpx auto;
		}
	}
	.storebox{
		width: 690rpx;
		// height: 386rpx;
		background: #FFFFFF;
		border-radius: 10rpx ;
		padding: 0 30rpx 20rpx 30rpx;
		.storeinfo{
			// height: 190rpx;
			// border-bottom: solid 2rpx #E9E9E9;
			.storename{
				display: flex;
				height: 66rpx;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}
			}
			.algorithm{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				image{
					width: 46rpx;
					height: 46rpx;
					margin: 0 15rpx;
				}
				>view{
					width: 80rpx;
					text-align: center;
				}
			}
			.storephone{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				.phone{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					image{
						width: 39rpx;
						height: 39rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
		.topicbox{
			height: 97rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;
			image{
				width: 11rpx;
				height: 19rpx;
				margin-left: 20rpx;
			}
			.pricebox{
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #F94D29;
			}
			.coupon{
				width: fit-content;
				height: 44rpx;
				background: #F94D29;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #FFFFFF;
				padding: 0 13rpx;
				line-height: 44rpx;
			}
		}
	}
	.paybox{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 40rpx 30rpx 0 30rpx;
		margin-top: 24rpx;
		.titlebox{
			width: 112rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			background: linear-gradient(180deg, #FFF 70%, #ffedea 100%);
		}
		.paytype{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 97rpx;
			margin-top: 20rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.payname{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #222222;
				image{
					width: 45rpx;
					height: 46rpx;
					margin-right: 20rpx;
				}
			}
			
		}
	}
	.navbut{
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.totalprice{
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.butbox{
			margin-right: 30rpx;
			width: 228rpx;
			height: 84rpx;
			background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
			border-radius: 83rpx;
			line-height: 84rpx;
			text-align: center;
			color: #FFF;
		}
	}

</style>
